<template>
  <a-modal
    :visible="visible"
    :title="$t('对账结果')"
    :mask-closable="false"
    :closable="false"
    :ok-text="$t('保存')"
    :cancel-text="$t('关闭')"
    @ok="handleSave"
    @cancel="handleClose"
  >
    <a-descriptions :column="3" size="small" bordered>
      <a-descriptions-item :label="$t('总笔数')">
        {{ statistics.totalCount || 0 }}
      </a-descriptions-item>
      <a-descriptions-item :label="$t('匹配笔数')" class="match-count">
        {{ statistics.matchCount || 0 }}
      </a-descriptions-item>
      <a-descriptions-item :label="$t('不匹配笔数')" class="unmatch-count">
        {{ statistics.unmatchCount || 0 }}
      </a-descriptions-item>
      <a-descriptions-item :label="$t('总金额')">
        ¥{{ statistics.totalAmount ? statistics.totalAmount.toFixed(2) : '0.00' }}
      </a-descriptions-item>
      <a-descriptions-item :label="$t('匹配金额')" class="match-count">
        ¥{{ statistics.matchAmount ? statistics.matchAmount.toFixed(2) : '0.00' }}
      </a-descriptions-item>
      <a-descriptions-item :label="$t('差异金额')" class="unmatch-count">
        ¥{{ statistics.unmatchAmount ? statistics.unmatchAmount.toFixed(2) : '0.00' }}
      </a-descriptions-item>
    </a-descriptions>

    <a-divider style="margin: 16px 0" />

    <a-form :model="form" ref="formRef">
      <a-form-item field="batchName" :label="$t('批次名称')" :rules="[{ required: true, message: $t('请输入批次名称') }]">
        <a-input v-model="form.batchName" :placeholder="$t('请输入批次名称')" />
      </a-form-item>
    </a-form>

    <a-table
      :loading="loading"
      :columns="columns"
      :data="resultList"
      :pagination="false"
      :scroll="{ y: 400 }"
      :bordered="true"
      size="small"
    >
      <template #matchStatus="{ record }">
        <a-tag :color="record.matched ? 'green' : 'red'">
          {{ record.matched ? $t('已匹配') : $t('未匹配') }}
        </a-tag>
      </template>
      <template #amount="{ record }">
        <span :class="{ 'text-red': record.amountDiff !== 0 }">
          ¥{{ record.amount ? record.amount.toFixed(2) : '0.00' }}
        </span>
      </template>
      <template #systemAmount="{ record }">
        <span :class="{ 'text-red': record.amountDiff !== 0 }">
          ¥{{ record.systemAmount ? record.systemAmount.toFixed(2) : '0.00' }}
        </span>
      </template>
      <template #amountDiff="{ record }">
        <span class="text-red" v-if="record.amountDiff !== 0">
          ¥{{ record.amountDiff.toFixed(2) }}
        </span>
        <span v-else>-</span>
      </template>
    </a-table>
  </a-modal>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue';
import type { OrderReconciliationResultVO } from '@/api/order/reconciliation/types';

const props = defineProps<{
  visible: boolean;
  resultList: OrderReconciliationResultVO[];
  statistics: Record<string, any>;
}>();

const emit = defineEmits<{
  (e: 'update:visible', visible: boolean): void;
  (e: 'save', batchName: string): void;
}>();

// 表单数据
const formRef = ref();
const form = ref({
  batchName: '',
});

// 表格列定义
const columns = computed(() => [
  {
    title: '订单号',
    dataIndex: 'orderNo',
    width: 180,
    ellipsis: true,
    tooltip: true,
  },
  {
    title: '匹配状态',
    dataIndex: 'matchStatus',
    width: 100,
    slotName: 'matchStatus',
  },
  {
    title: '导入金额',
    dataIndex: 'amount',
    width: 120,
    slotName: 'amount',
  },
  {
    title: '系统金额',
    dataIndex: 'systemAmount',
    width: 120,
    slotName: 'systemAmount',
  },
  {
    title: '差异金额',
    dataIndex: 'amountDiff',
    width: 120,
    slotName: 'amountDiff',
  },
  {
    title: '备注',
    dataIndex: 'remark',
    width: 200,
    ellipsis: true,
    tooltip: true,
  },
]);

// 保存
async function handleSave() {
  try {
    await formRef.value.validate();
    emit('save', form.value.batchName);
  } catch (error) {
    // 表单验证失败
  }
}

// 关闭
function handleClose() {
  form.value.batchName = '';
  emit('update:visible', false);
}
</script>

<style scoped lang="less">
.match-count {
  :deep(.arco-descriptions-item-value) {
    color: #52C41A;
  }
}

.unmatch-count {
  :deep(.arco-descriptions-item-value) {
    color: #FF4D4F;
  }
}

.text-red {
  color: #FF4D4F;
}
</style> 